<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>编辑场地</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
</head>

<body>
	<div style="margin: 15px;" id="content">

	</div>
	<script type="text/html" id="tpl">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>添加服务</legend>
		</fieldset>
		<form class="layui-form" enctype="multipart/form-data" class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input type="text" value="<%==title%>" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">价格</label>
				<div class="layui-input-block">
					<input type="text" name="price" value="<%==price%>" lay-verify="required|price" autocomplete="off" placeholder="请输入价格" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所在城市</label>
				<div class="layui-input-inline">
					<select name="city" lay-verify="required">
							<option value="">请选择城市</option>
								<option value="南宁" selected>南宁</option>
						</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">微信号</label>
				<div class="layui-input-block">
					<input type="text" value="<%==wechat%>" name="wechat" lay-verify="required" autocomplete="off" placeholder="请输入微信号" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">数量</label>
				<div class="layui-input-block">
					<input type="text" value="<%==number%>" name="number" lay-verify="number" autocomplete="off" placeholder="数量" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">分类</label>
				<div class="layui-input-inline">
					<select name="serveCategory" lay-verify="required">
							<option value="">请选择分类</option>

						</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">服务详情</label>
				<div class="layui-input-block">
					<textarea class="layui-textarea layui-hide" name="details" id="details">
						<%==details%>
					</textarea>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">注意事项</label>
				<div class="layui-input-block">
					<textarea class="layui-textarea layui-hide" name="notes" id="notes">
						<%==notes%>
					</textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" type="submit" lay-submit="" lay-filter="add">立即提交</button>
				</div>
			</div>
		</form>
	</script>
	<script type="text/html" id="typeTpl">
		<% for(var i=0;i<$data.length;i++){ %>
		 <option value="<%==$data[i].scid%>" <% if($data[i].scid==$data[$data.length-1]) print("selected")%>><%==$data[i].categoryName%></option>
		 <%}%>
	</script>
	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script>
		var id = getUrlParam("id");
		var type = getUrlParam("type");
		var serveType;
		$.ajax({
			url: '/admin/serve/get/' + id,
			dataType: 'json',
			async: false,
			success: function(response) {
				if (response.code == 200) {
					var html = template('tpl', response.result);
					document.getElementById('content').innerHTML = html;
					serveType = response.result.serveCategory.scid;
				}
			}
		});

		$.ajax({
			url: "/admin/serve/catlist?type="+type,
			datatype: "json",
			async: false,
			success: function(data) {
				data.result.push(serveType);
				console.log(data.result);
				var html = template('typeTpl', data.result);
				var element = document.querySelector("select[name='serveCategory']");
				element.innerHTML +=  html;
			}
		});

		layui.use(['form', 'layedit', 'laydate', 'element'], function() {
			var form = layui.form(),
				layer = layui.layer,
				layedit = layui.layedit,
				laydate = layui.laydate;
			var element = layui.element();

			layedit.set({
				uploadImage: {
					url: '/admin//image/simple/upload',
					type: 'post',
					data: 'image',
					success: function(res) {
						res = res.parseJSON();
						console.log(res.result.imgUrl);
					}
				}
			});
			//创建一个编辑器
			var details = layedit.build('details');
			var notes = layedit.build('notes');
			//自定义验证规则

			form.verify({
				price: function(value, item) {
					if (isNaN(value)) {
						return "价格格式不正确";
					}
				}
			});




			form.on('submit(add)', function(data) {
				var det = layedit.getContent(details);
				var not = layedit.getContent(notes);


				var url = "/admin/serve/update?type=" + type + "&title= " + data.field.title + " &city=" + data.field.city + "&price=" + data.field.price + "&details=" + det + "&notes=" + not + "&wechat=" + data.field.wechat + "&number=" + data.field.number +
					"&serveCategory.scid="+data.field.serveCategory+"&sid="+id;

				$.ajax({
					url: url,
					type: "post",
					datatype: "json",
					success: function(data) {
						if (data.code == 200) {
							toast("修改成功");
						}else{
							toast("修改失败");
						}
					}
				});

				return false;
			});
		});
	</script>

</body>

</html>
